<template>
	<view class="page-container">
		<swiper style="height: 100%;">
			<swiper-item>
				<scroll-view scroll-y="true">
					<view style="overflow: auto;">
						<u-steps current="0" style="margin-top: 20rpx;">
							<u-steps-item title="材料提交">
							</u-steps-item>
							<u-steps-item title="项目展示"></u-steps-item>
							<u-steps-item title="论文上传"></u-steps-item>
						</u-steps>
						<u--form labelPosition="top" :model="materialModel" labelWidth="80" class="form">
							<u-form-item label="任务书">
								<uni-file-picker v-model="fileList3" limit="1" file-mediatype="all" @select="uploadDoc1"
									v-if="userInfo.roleId === 2"></uni-file-picker>
								<img src="@/static/doc_picture.png" alt="" style="width: 120rpx;height: 120rpx;"
									@click="handleDoc(materialModel.taskDoc)" v-else />
							</u-form-item>
							<u-form-item label="ui原型图">
								<u-upload @afterRead="afterRead1" name="1" multiple :fileList="fileList1"
									style="margin-top: 10rpx;" @delete="handleDelete1"
									v-if="userInfo.roleId === 2"></u-upload>
								<image :src="'http://localhost:8081' + materialModel.uiImg"
									@click="handlePreview(materialModel.uiImg)" v-else />
							</u-form-item>
							<u-form-item label="数据库表">
								<u-upload @afterRead="afterRead2" name="1" multiple :fileList="fileList2"
									style="margin-top: 10rpx;" @delete="handleDelete2"
									v-if="userInfo.roleId === 2"></u-upload>
								<image :src="'http://localhost:8081' + materialModel.dataImg"
									@click="handlePreview(materialModel.dataImg)" v-else />
							</u-form-item>
							<u-form-item>
								<u-button type="primary" @click="submitMaterial"
									v-if="userInfo.roleId === 2">提交</u-button>
							</u-form-item>
						</u--form>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<u-steps current="1" style="margin-top: 20rpx;">
					<u-steps-item title="材料提交">
					</u-steps-item>
					<u-steps-item title="项目展示"></u-steps-item>
					<u-steps-item title="论文上传"></u-steps-item>
				</u-steps>
				<u--form labelPosition="top" :model="projectModel" labelWidth="80" class="form">
					<u-form-item label="功能描述">
						<u--textarea v-model="projectModel.funDesc" placeholder="请输入内容"
							:disabled="userInfo.roleId !== 2"></u--textarea>
					</u-form-item>
					<u-form-item label="演示视频">
						<uni-file-picker v-model="fileList4" limit="1" file-mediatype="video" @select="uploadVideo"
							v-if="userInfo.roleId === 2"></uni-file-picker>
						<video :src="'http://localhost:8081' + projectModel.demoVideo" v-else></video>
					</u-form-item>
					<u-form-item>
						<u-button type="primary" @click="submitProject" v-if="userInfo.roleId === 2">提交</u-button>
					</u-form-item>
				</u--form>
			</swiper-item>
			<swiper-item>
				<u-steps current="2" style="margin-top: 20rpx;">
					<u-steps-item title="材料提交">
					</u-steps-item>
					<u-steps-item title="项目展示"></u-steps-item>
					<u-steps-item title="论文上传"></u-steps-item>
				</u-steps>
				<u--form labelPosition="top" :model="paperModel" labelWidth="80" class="form">
					<u-form-item label="学号">
						<u--input v-model="paperModel.stuCode" placeholder="请输入内容" border="surround"
							disabled></u--input>
					</u-form-item>
					<u-form-item label="学生姓名">
						<u--input v-model="paperModel.stuName" placeholder="请输入内容" border="surround"
							disabled></u--input>
					</u-form-item>
					<u-form-item label="导师姓名">
						<u--input v-model="paperModel.tchName" placeholder="请输入内容" border="surround"
							disabled></u--input>
					</u-form-item>
					<u-form-item label="论文文档">
						<uni-file-picker v-model="fileList5" limit="1" file-mediatype="all"
							@select="uploadDoc2" v-if="userInfo.roleId === 2"></uni-file-picker>
						<img src="@/static/doc_picture.png" alt="" style="width: 120rpx;height: 120rpx;"
							@click="handleDoc(paperModel.paperDoc)" v-else />
					</u-form-item>
					<u-form-item>
						<u-button type="primary" @click="submitPaper" v-if="userInfo.roleId === 2">提交</u-button>
					</u-form-item>
				</u--form>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		materialDetailService,
		paperDetailService,
		projectDetailService,
		updateMaterialService,
		updatePaperService,
		updateProjectService
	} from '../../api/work';
	export default {
		data() {
			return {
				materialModel: {
					materialId: null,
					workId: null,
					taskDoc: '',
					uiImg: '',
					dataImg: ''
				},
				projectModel: {
					projectId: null,
					workId: null,
					demoVideo: '',
					funDesc: ''
				},
				paperModel: {
					paperId: null,
					paperDoc: '',
					stuCode: uni.getStorageSync('user-profile').userCode,
					stuName: uni.getStorageSync('user-profile').userName,
					tchName: uni.getStorageSync('user-profile').tchName,
					workId: null
				},
				fileList3: {},
				fileList1: [],
				fileList2: [],
				fileList4: {},
				fileList5: {},
				userInfo: uni.getStorageSync('user-profile')
			};
		},
		onLoad(option) {
			this.materialModel.workId = option.id
			this.projectModel.workId = option.id
			this.paperModel.workId = option.id
			this.getMaterial(option.id)
			this.getProject(option.id)
			this.getPaper(option.id)
		},
		methods: {
			handleDoc(path) {
				const url = "http://localhost:8081" + path
				uni.openDocument({
					filePath: url,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功');
					}
				})
			},
			uploadDoc1(e) {
				console.log(e)
				uni.uploadFile({
					url: '/api/upload/img',
					name: 'file',
					filePath: e.tempFilePaths[0],
					header: {
						'Authorization': uni.getStorageSync("user-token")
					},
					success: (res) => {
						console.log(JSON.parse(res.data).data)
						this.materialModel.taskDoc = JSON.parse(res.data).data
						let url = "http://localhost:8081" + JSON.parse(res.data).data
						this.fileList3 = {
							url: url,
							extname: e.tempFiles[0].extname,
							name: e.tempFiles[0].name
						}
						// console.log(this.fileList1)
					}
				})
			},
			uploadDoc2(e) {
				console.log(e)
				uni.uploadFile({
					url: '/api/upload/img',
					name: 'file',
					filePath: e.tempFilePaths[0],
					header: {
						'Authorization': uni.getStorageSync("user-token")
					},
					success: (res) => {
						console.log(JSON.parse(res.data).data)
						this.paperModel.paperDoc = JSON.parse(res.data).data
						let url = "http://localhost:8081" + JSON.parse(res.data).data
						this.fileList5 = {
							url: url,
							extname: e.tempFiles[0].extname,
							name: e.tempFiles[0].name
						}
						// console.log(this.fileList1)
					}
				})
			},
			uploadVideo(e) {
				uni.uploadFile({
					url: '/api/upload/img',
					name: 'file',
					filePath: e.tempFilePaths[0],
					header: {
						'Authorization': uni.getStorageSync("user-token")
					},
					success: (res) => {
						console.log(JSON.parse(res.data).data)
						this.projectModel.demoVideo = JSON.parse(res.data).data
						let url = "http://localhost:8081" + JSON.parse(res.data).data
						this.fileList4 = {
							url: url,
							extname: e.tempFiles[0].extname,
							name: e.tempFiles[0].name
						}
					}
				})
			},
			afterRead1(e) {
				console.log(e.file[0].url)
				uni.uploadFile({
					url: '/api/upload/img',
					name: 'file',
					filePath: e.file[0].url,
					header: {
						'Authorization': uni.getStorageSync("user-token")
					},
					success: (res) => {
						console.log(JSON.parse(res.data).data)
						this.materialModel.uiImg = JSON.parse(res.data).data
						let url = {
							url: "http://localhost:8081" + JSON.parse(res.data).data
						}
						this.fileList1.push(url);
						// console.log(this.fileList1)
					}
				})
			},
			afterRead2(e) {
				uni.uploadFile({
					url: '/api/upload/img',
					name: 'file',
					filePath: e.file[0].url,
					header: {
						'Authorization': uni.getStorageSync("user-token")
					},
					success: (res) => {
						console.log(JSON.parse(res.data).data)
						this.materialModel.dataImg = JSON.parse(res.data).data
						let url = {
							url: "http://localhost:8081" + JSON.parse(res.data).data
						}
						this.fileList2.push(url);
						// console.log(this.fileList1)
					}
				})
			},
			handleDelete1() {
				this.fileList1.pop();

			},
			handleDelete2() {
				this.fileList2.pop();
			},
			async getMaterial(workId) {
				const res = await materialDetailService(workId)
				if (res) {
					this.materialModel = res
					this.fileList1.push({
						url: "http://localhost:8081" + this.materialModel.uiImg
					})
					this.fileList2.push({
						url: "http://localhost:8081" + this.materialModel.dataImg
					})
					this.fileList3 = {
						url: "http://localhost:8081" + this.materialModel.taskDoc,
						extname: 'doc',
						name: '任务书'
					}
				}
			},
			async getProject(workId) {
				const res = await projectDetailService(workId)
				if (res) {
					this.projectModel = res
					this.fileList4 = {
						url: "http://localhost:8081" + this.projectModel.demoVideo,
						extname: 'mp4',
						name: '演示视频'
					}
				}
			},
			async getPaper(workId) {
				const res = await paperDetailService(workId)
				if (res) {
					this.paperModel = res
					this.fileList5 = {
						url: "http://localhost:8081" + this.paperModel.paperDoc,
						extname: 'doc',
						name: '论文文件'
					}
				}
			},
			async submitMaterial() {
				await updateMaterialService(this.materialModel)
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
			},
			async submitProject() {
				await updateProjectService(this.projectModel)
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
			},
			async submitPaper() {
				await updatePaperService(this.paperModel)
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
			},
			handlePreview(url) {
				const imageUrl = 'http://localhost:8081' + url
				uni.previewImage({
					urls: [imageUrl]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		height: calc(100vh - 88rpx) !important;
		overflow: auto;
		.form {
			padding: 30rpx;
		}
	}
</style>